:root {
  --fondo: #e88dff;
  --titulos: #9eff1e;
  --parrafo: rgb(238, 255, 0);
  --colorPrincipal: #ff5722;
  --colorTexto: #fefefe;
  --tamanioFuente: 18px;
}

body {
  background-color: var(--fondo);
  transition: all 0.3s ease;
}

h1 {
  color: var(--titulos);
  transition: all 0.3s ease;
}

p {
  color: var(--parrafo);
  transition: all 0.3s ease;
}

.p2 {
  --parrafo: #08ffad;
  color: var(--parrafo);
}

.p3 {
  --parrafo-dos: rgb(255, 115, 0);
  color: var(--parrafo-dos);
}

.bloque {
  background-color: var(--colorTexto);
  color: var(--colorPrincipal);
  border-radius: 10px;
  padding: 20px;
  max-width: 600px;
  margin: auto;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  font-size: var(--tamanioFuente);
  transition: all 0.3s ease;
}

.bloque h3 {
  border-bottom: 2px dashed var(--colorPrincipal);
  padding-bottom: 5px;
  transition: all 0.3s ease;
}

.botones button {
  margin-right: 10px;
  background-color: var(--colorPrincipal);
  color: var(--colorTexto);
  border: none;
  padding: 10px 15px;
  cursor: pointer;
  border-radius: 5px;
  transition: all 0.3s ease;
}

.botones button:hover {
  background-color: #e64a19;
}

.acciones {
  margin-top: 20px;
  text-align: center;
}

.acciones button {
  padding: 10px;
  margin: 5px;
  border: 2px solid var(--colorTexto);
  background-color: transparent;
  color: var(--colorTexto);
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.acciones button:hover {
  background-color: var(--colorTexto);
  color: var(--colorPrincipal);
}

/* Cambios cuando la pantalla es de 450px o más */
@media screen and (min-width: 450px) {
  :root {
    --colorPrincipal: #4da6ff;
    --tamanioFuente: 26px;
  }
}